<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    filterable
    :loading="loading"
    placeholder="请选择分类"
  >
    <el-option
      v-for="category in categoryList"
      :key="category.id"
      :label="category.name"
      :value="category.id"
    ></el-option>
  </el-select>
</template>

<script setup>
// 1. 导入依赖
import { getCategoryAPI } from "@/apis/category.js";
import { ref } from "vue";

// 2. 定义Props
defineProps({
  modelValue: {
    type: [Number, String],
  },
});

// 3. 定义Emits
const emit = defineEmits(["update:modelValue"]);

// 4. 定义响应式数据
const categoryList = ref([]);
const loading = ref(false);

// 5. 定义方法并调用以初始化数据
const getCategory = async () => {
  loading.value = true;
  const res = await getCategoryAPI();
  categoryList.value = res.data;
  loading.value = false;
};

// 立即调用以获取数据
getCategory();
</script>